import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import React from 'react';

import navigationTool from '../../utilities/navigationTool';
import { NavigationContext } from 'react-navigation';
interface IndexProps {
    title?: string;
    shwowBack?: boolean;
    showMore?: boolean;
    isNativeBack?: boolean;
}
const index = (props: IndexProps) => {
    const navigation = React.useContext(NavigationContext);
    const {
        title = '',
        shwowBack = false,
        showMore = false,
        isNativeBack = false,
    } = props;
    const backAction = () => {
        if (isNativeBack) {
            navigationTool.popPage();
        } else {
            navigation.goBack();
        }
    };
    return (
        <View style={styles.container}>
            <View style={styles.wrapper}>
                <View style={styles.leftWrapper}>
                    <TouchableOpacity onPress={backAction}>
                        {shwowBack ? (
                            <Text style={styles.btnText}>goback</Text>
                        ) : null}
                    </TouchableOpacity>
                </View>

                <Text style={styles.title}>{title}</Text>
                <View style={styles.rightWrapper}>
                    <TouchableOpacity onPress={() => {}}>
                        {showMore ? (
                            <Text style={styles.btnText}>more</Text>
                        ) : null}
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    );
};

export default index;

const styles = StyleSheet.create({
    container: {
        paddingTop: 50,
        backgroundColor: 'gray',
    },
    wrapper: {
        height: 44,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingHorizontal: 15,
        alignItems: 'center',
    },
    leftWrapper: {
        flex: 1,
    },
    rightWrapper: {
        flex: 1,
        alignItems: 'flex-end',
    },
    title: {
        fontSize: 18,
    },
    btnText: {
        fontSize: 14,
    },
});
